<template>
	<div>
		<newHeader />

		<el-main>
			<el-row :gutter="20" style="min-height: 400px;margin: 0 auto;width: 1200px;">
				<el-col :span="11" style="margin-left: 10%;">
					<div>
						<p>
							<span style="font-size: 15px;font-weight: bold;color: #999999;">用户注册/登录说明：</span>
							<br />
							<span style="font-size: 12px;margin-top: 30px;display: block;line-height: 200%;color: #8B4513;">
								1、演示用户名：demouser；密码：demo1234<br />
								2、实际使用之前，需配置用户管理组件中的相关邮件。详情请参考教程：《用户管理中相关邮件的配置》<br />
								3、新用户注册后的审核方式有三种：自动核准、邮件激活、需要管理员批准（即人工审核），详情可参考教程《如何设置用户注册后的审核方式》
							</span>
						</p>
					</div>
				</el-col>
				<el-col :span="9">
					<!--  登录页面展示  -->
					<div :class="(pageStatus.loginVisible?'boxForLogin boxvisible':'boxForLogin boxGone')">
						<el-form ref="formLogin" label-position="left" :model="formLogin" :rules="rulesLogin" label-width="100px" size="mini" class="demo-ruleForm">
							<!-- Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 -->
							<el-form-item label="用户名" inline-message="true" prop="userName">
								<el-input v-model="formLogin.userName"></el-input>
							</el-form-item>
							<el-form-item label="密码" inline-message="true" prop="password">
								<el-input v-model="formLogin.password"></el-input>
							</el-form-item>
							<el-form-item label=" ">
								<el-checkbox-group v-model="formLogin.remeberPwd">
									<el-checkbox label="记住我（请在私人设备上使用此功能）" name="type"></el-checkbox>
								</el-checkbox-group>
							</el-form-item>
							<el-divider></el-divider>
							<el-form-item label=" ">
								<el-button type="primary" size="mini" @click="submitLogin('formLogin')">登录</el-button>
								<el-button size="mini" @click="resetLoginToregist('formLogin')">注册</el-button>
							</el-form-item>

							<el-link type="info" style="float: right;" href="/" target="_blank">忘记密码？点击这里找回</el-link>

						</el-form>

					</div>

					<!--  注册页面展示  -->
					<div :class="(pageStatus.registVisible?'boxForLogin boxvisible':'boxForLogin boxGone')">
						<el-form ref="formRegiest" label-position="left" :model="formRegiest" :rules="rulesRegist"  label-width="100px" size="mini">
							<el-form-item label="用户名"  prop="userName">
								<el-input v-model="formRegiest.userName"></el-input>
							</el-form-item>
							<el-form-item label="电子邮箱" prop="email">
								<el-input v-model="formRegiest.email"></el-input>
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input v-model="formRegiest.password"></el-input>
							</el-form-item>
							<el-form-item label="再输一次密码" prop="passwordAgain">
								<el-input v-model="formRegiest.passwordAgain"></el-input>
							</el-form-item>
							<el-form-item label=" " prop="agreeXieyi">
								<el-checkbox-group v-model="formRegiest.agreeXieyi">
									<el-checkbox label="我同意《用户手册》和《保密条款》" name="type"></el-checkbox>
								</el-checkbox-group>
							</el-form-item>
							<el-divider></el-divider>
							<el-form-item label=" ">
								<el-button type="primary" size="mini" @click="submitRigiest('formRegiest')">注册</el-button>
								<el-button size="mini" style="float: right;" @click="resetRigiest('formRegiest')">登录</el-button>
							</el-form-item>


							<el-link type="info" style="float: right;" href="/" target="_blank">忘记密码？点击这里找回</el-link>

						</el-form>

					</div>
				</el-col>

			</el-row>

		</el-main>

		<newFooter />
	</div>
</template>

<script>
	// 导入其他模板示例
	import newHeader from '../home/newheader.vue'
	import newFooter from '../home/newFooter.vue'

	export default {
		name: 'home',
		components: {
			newHeader,
			newFooter
		},
		data() {
			//定义校验方法
			var validateName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('用户名不能为空'));
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('请输入密码'));
				} else {
					return callback( );
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('请再次输入密码'));
				} else if (value !== this.formRegiest.passwordAgain) {
					return callback(new Error('两次输入密码不一致!'));
				} else {
					return callback();
				}
			};
			var validateEmail = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('邮箱不能为空'));
				} else if (value !== this.ruleForm.pass) {
					return callback(new Error('两次输入密码不一致!'));
				} else {
					return callback();
				}
			};
			var validateXieyi = (rule, value, callback) => {
				console.log("查看返回值："+value)
				if (value === '') {
					return callback(new Error('邮箱不能为空'));
				} else if (value !== this.ruleForm.pass) {
					return callback(new Error('两次输入密码不一致!'));
				} else {
					return callback();
				}
			};
			return {
				pageStatus:{
					loginVisible:true,
					registVisible:false,
				},
				formLogin: {
					userName: '',
					password: '',
					remeberPwd: false,
				},
				rulesLogin: {
					userName: [{
						validator: validateName,
						trigger: 'blur'
					}],
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}],
				},
				rulesRegist: {
					userName: [{
						validator: validateName,
						trigger: 'blur'
					}],
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					passwordAgain: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					email: [{
						validator: validateEmail,
						trigger: 'blur'
					}],
					Xieyi: [{
						validator: validateXieyi,
						trigger: 'blur'
					}]
				},
				formRegiest: {
					userName: '',
					email: '',
					password: '',
					passwordAgain: '',
					agreeXieyi: false,
				},
			}
		},
		methods: {
			submitLogin(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetLoginToregist(formName){
				//清空登录页数据
				this.$refs[formName].resetFields();
				//显示注册页数据 
				this.pageStatus.loginVisible=false;
				this.pageStatus.registVisible=true;
			},
			submitRigiest(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetRigiest(formName) {
				//清空登录页数据
				this.$refs[formName].resetFields();
				//显示注册页数据 
				this.pageStatus.loginVisible=true;
				this.pageStatus.registVisible=false;
			}
		},
		// beforeCreate(){
		// 	console.log("页面实例创建之前"+this.$route.params.userId)
		// 	//页面实例创建之前
		// },
		// created() {
		// 	console.log("页面实例创建时"+this.$route.params.userId)
		// 	//页面实例创建时
		// },
		// beforeMount(){
		// 	//页面实例挂载之前
		// 	console.log("页面实例挂载之前"+this.$route.params.userId)
		// 	
		// },
		// mounted(){
		// 	//页面实例挂载
		// 	console.log("页面实例挂载"+this.$route.params)
		// 	
		// },
		// beforeUpdate(){
		// 	//页面实例更新之前
		// 	console.log("页面实例更新之前"+this.$route.params)
		// 	
		// },
		// updated(){
		// 	//页面实例更新之后
		// 	console.log("页面实例更新之后"+this.$route.params)
		// 	
		// },
		// beforeDestroy(){
		// 	//页面实例销毁之前
		// 	console.log("页面实例销毁之前"+this.$route.params)
		// 	
		// },
		// destroyed() {
		// 	//页面实例销毁完成
		// 	console.log("页面实例销毁完成"+this.$route.params)
		// 	
		// }
	}
</script>

<style scoped="scoped">
	.el-col .boxForLogin{
		border-radius: 4px;
		border: 1px solid #eee;
		padding: 40px;
		display: block;
	}
	.el-col .boxvisible{ 
		display: block;
	}
	.el-col .boxGone{ 
		display: none;
	}
	
	.el-form-item label {
		font-size: 12px;
	}

	.el-form-item__content {
		line-height: 100%;
	}

	.el-form-item .el-form-item__content .el-checkbox__label {
		font-size: 12px;
		line-height: 100%;
	}
</style>
